<template>
    <div class="box_alarm">
        <MoodalTitle :title="'环卫车辆在线情况'" />
        <div class="filx">
            <!-- 左 -->
            <div class="box_lf">
                <p class="box_p"><span>{{form.NumberOfSprinklerOnline}}</span>/<span style="color: #C9C9C9; font-weight: 400;">{{form.NumberOfSprinkler}}</span></p>
                <p class="box_sc">洒水车</p>
            </div>
            <!-- 中 -->
            <div class="box_lf">
                <p class="box_p"><span>{{form.NumberOfGarbageTruckOnline}}</span>/<span style="color: #C9C9C9; font-weight: 400;">{{form.NumberOfGarbageTruck}}</span></p>
                <p class="box_sc">垃圾清运车</p>
            </div>
            <!-- 右 -->
            <div class="box_lf">
                <p class="box_p"><span>{{form.NumberOfSweeperOnline}}</span>/<span style="color: #C9C9C9; font-weight: 400;">{{form.NumberOfSweeper}}</span></p>
                <p class="box_sc">机扫车</p>
            </div>
        </div>
    </div>
</template>
<script>
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import {ZongHeZhztaDB} from '@/api/zhangzi/index'
export default {
    components: {MoodalTitle},
    data(){
        return{
            form:{

            }
        }
    },
    mounted(){
        this.getZhzta()
    },
    methods:{
        // 环卫车辆在线情况
         getZhzta(){
            ZongHeZhztaDB.getWcVehicle().then(res=>{
                console.log(res,'环卫车辆在线情况');
                if(res.code == 200){
                    this.form = res.data
                }
            })
         }
    }
}
</script>

<style lang="less" scoped>
.box_alarm {
    width: 50rem;
    height: 24.5rem !important;
    margin-bottom: 1.9rem;
}
.filx {
    display: flex;
    justify-content: space-between;
}
.box_lf{
    position: relative;
    margin-top:  1.8rem;
    width:  14.2rem;
    height:  13.9rem;
    background: url(../../../../assets/images/zhangzi/Sanitation/Sprinkler2.png) no-repeat;
    background-size: cover;
    .box_p{
        position: absolute;
        top: 37%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2.2rem;
        font-weight: 600;
        color: #42AD0D;
    }
    .box_sc{
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: 600;
        font-size: 1.4rem;
        color: #fff;
    }
}
</style>